<template>
<el-dialog
    :title="title"
    :append-to-body="true"
    width="70%"
    top = "5vh"
    center
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div id="container"></div>
    <!-- <BaiduMap class="map" ak="OLvgFl1TP6FHYe6cA5TiDpzkviHLwQHQ">
    </BaiduMap> -->
    <!-- <baidu-map class="" center="襄阳" @click="getPoint">
      <bm-view style="width: 100%; height:550px;"></bm-view>
      <bm-local-search :keyword="coordinate.showAddress" :auto-viewport="true"></bm-local-search>
    </baidu-map>   -->
    <div style="display:flex;justify-content:space-between;align-items:center;">
    <div style="margin-left:10px;">
      <div>
        <el-input v-model.lazy="coordinate.showAddress" placeholder="请输入查询地址" style="width:300px" @keyup.enter.native = "keyWordSearch" clearable></el-input>
        <button @click="keyWordSearch" class="searchBtn">查询</button>
      </div>
      <div style="font-size:20px;margin-top:10px">获取当前位置：</div>
      <div><span>lng:{{coordinate.lng}}</span><span style="margin-left:10px">lat:{{coordinate.lat}}</span></div>
      <div>地址：{{coordinate.showAddress}}</div>
    </div>
    <div style="margin-right:10px;font-size:13px;">
      <div style="color:#F56C6C;">使用方法：</div>
      <div style="margin-bottom:7px;">请用鼠标左键点击地图，地图将自动拾取当前坐标</div>
      <div style="color:#F56C6C;">注意：</div>
      <div>为方便客户能找到您的店铺位置，选址请尽量准确</div>
    </div>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取消</el-button>
    <el-button type="primary" @click="dataFormSubmit">抓取当前位置</el-button>
    </span>
</el-dialog>
</template>

<script>
// import BaiduMap from '../../utils/map'
export default {

  data() {
      return {
        // BaiduMap: BaiduMap,
        title:'抓取地址',
        visible: false,
        map:null,
        coordinate:{
          lng:112.127958,
          lat:32.015042,
          showAddress: '湖北省襄阳市',
        },
        addressArray:{},
      }
  },
  props:{
  },

  components:{
    // BaiduMap
  },

  watch:{
    coordinate:{
      handler:function (val,oldval) {
        if (val.showAddress == '') {
          this.map.clearOverlays();
        }
      },
      deep: true
    },
  },

  methods: {
    init () {
      this.visible = true
      this.$nextTick(()=>{
        this.newMap()
      })
  },


    //初始化地图
    newMap () {
      let ths = this      // let BMap = ths.$BMap
      // 百度地图API功能
      let map = new BMap.Map("container");          // 创建地图实例
      let point = new BMap.Point(112.127958,32.015042)  // 创建点坐标
      map.centerAndZoom(point, 11);                 // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      this.map = map

      //初始化逆解析对象
      let geoc = new BMap.Geocoder()
      this.geoc = geoc

      //初始化图标
      var myIcon = new BMap.Icon("https://xiaoxiangai.oss-cn-beijing.aliyuncs.com/2024/09/02/A14460.png", new BMap.Size(23, 28))
      this.Icon = myIcon
      //初始化检索对象

      var options = {
        onSearchComplete: function(results){
          if (local.getStatus() == BMAP_STATUS_SUCCESS){
            // 判断状态是否正确
            results.Ir.forEach((item,index) => {
              if (index == 0) {
                map.centerAndZoom(item.point, 17)
              }
              let marker = new BMap.Marker(item.point, {icon: myIcon})
              map.addOverlay(marker)
            });
          }
        }
      };
      var local = new BMap.LocalSearch(map, options);
      this.local = local



      // 添加带有定位的导航控件
      var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
      });
      map.addControl(navigationControl);
      // 添加定位控件
      var geolocationControl = new BMap.GeolocationControl();
      geolocationControl.addEventListener("locationSuccess", function(e){
        // console.log(e);
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        // console.log("当前定位地址为：" + address);
      });
      geolocationControl.addEventListener("locationError",function(e){
        // 定位失败事件
        ths.$message({
          type:"warning",
          message:"定位出错"
        })
        // console.log(e.message);
      });
      map.addControl(geolocationControl);

      //鼠标点击获取坐标和地址
      function showInfo(e){
        // console.log("running");
        // alert(e.point.lng + ", " + e.point.lat)

        ths.$set(ths.coordinate,"lng",e.point.lng)
        ths.$set(ths.coordinate,"lat",e.point.lat)

        geoc.getLocation(e.point, function(rs){
          var addComp = rs.addressComponents;
          // console.log(addComp);
          ths.addressArray = addComp
          // let showAddress = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
          let showAddress = addComp.province + ", " + addComp.city + ", " + addComp.district
          ths.$set(ths.coordinate,"showAddress",showAddress)
          // console.log(ths.addressArray);

          });
        }
        map.addEventListener("click", showInfo);
    },

    //搜索地址
    keyWordSearch(){
      console.log("search running");

      this.local.search(this.coordinate.showAddress)
    },

    dataFormSubmit(){
      this.$emit("getAddress",this.coordinate,this.addressArray)
      // console.log(this.addressArray);
      this.visible = false
    }
  },

  mounted(){
    // console.log("mounted running");
    // this.BaiduMap.init()
    // this.BauduMap.init()
    // .then((BMap) => {
    //     console.log(BMap)
    //     console.log("加载成功...")
    // })
  }
}
</script>

<style lang="scss">
  #container{
    width: 100%;
    height: 600px;
    border-radius: 5px;
  }

  .el-dialog--center .el-dialog__body {
    text-align: initial;
    padding: 25px 0 30px;
  }

  .searchBtn{
    height: 30px;
    width: 60px;
    border: 1px solid #DCDFE6;
    border-radius: 3px;
  }

  .map{
    height: 600px;
  }
</style>
